<script>
import { reactive, toRefs } from "vue";
import { useSearchCar, useEditCar } from "./useCarInfo";
import { getDicMap, getUserInfo } from "@/utils/storage";
import { useTzRouter } from "@/vhooks/useTzRouter";
export default {
  name: "AddCar",
  components: {},
  setup() {
    const {
      route,
      redirectTo,
      navigateTo,
      navigateBack,
      EventChannel,
    } = useTzRouter();
    const dicMap = getDicMap();
    const state = reactive({
      carForm: {
        data: {
          dMobile: dicMap.userType.isPersonal ? getUserInfo().name : "",
          numStaffMember: 1,
          healthStatus: 1,
          vaccinate: 0,
          rountingCountryCode: "HK",
        },
        id: "",
        show: route.query.type === "add",
      },
      type: route.query.type,
      isDisabled: dicMap.userType.isDriver,
      detailToEdit: route.query.detailToEdit || 0, // 1 来自详情页  0 不是来自详情页
      truckOrderType: route.query.truckOrderType, // 捆绑类型 1 无柜空车；2 有柜空车；3 重车
    });
    const truckPayloadType = route.query.truckPayloadType
      ? JSON.parse(route.query.truckPayloadType)
      : null;
    state.truckPayloadType = truckPayloadType;

    const searchCarHook = useSearchCar({ state, dicMap, route, EventChannel });
    const editCarHook = useEditCar({ state, dicMap, navigateBack });
    //新增车辆信息
    const handleAddCar = () => {
      navigateTo({
        path: "/pages/subCN/truck/addCar/index",
        query: {
          type: "add",
          truckPayloadType: JSON.stringify(state.truckPayloadType),
        },
      });
    };

    const titleTextObj = {
      add: "新增车辆",
      edit: "编辑车辆",
      default: "车辆选择",
    };

    // 显示新增车辆按钮
    const showAddCarBtn = () =>
      state.type !== "add" &&
      +state.detailToEdit === 0 &&
      !dicMap.userType.isDriver;

    return () => {
      return (
        <tz-view class="truck-add-card">
          <tz-view class="title-content">
            <text>{titleTextObj[state.type] || titleTextObj.default}</text>
            {showAddCarBtn() && (
              <tz-button type="primary" size="small" onClick={handleAddCar}>
                新增车辆
              </tz-button>
            )}
          </tz-view>
          {state.type !== "add" && searchCarHook()}
          {state.carForm.show && editCarHook()}
        </tz-view>
      );
    };
  },
};
</script>

<style lang="scss">
.truck-add-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title-content {
    min-height: 60px;
    padding: 5px 15px;
    width: 100%;
    background: $white;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    @extend %bt1;
    @extend %bb1;
  }
  .form-content {
    width: 100%;
    background: $white;
    padding: 0 15px;
  }
  .search-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    .car-list {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      margin-top: 10px;
      width: 100%;
      .tz-button {
        margin-bottom: 10px;
      }
      .bg-white {
        background: $white;
      }
    }
    .search-content {
      text-align: center;
      width: 100%;
      display: flex;
      align-items: center;
      .search-input {
        display: inline-flex;
        align-items: center;
        border: 1px solid $border-color;
        height: 30px;
        line-height: 30px;
        background-color: $white;
        border-radius: 4px;
        margin-right: 10px;
        .tz-input {
          display: flex;
        }
      }
      .btn-search {
        color: $primary-color;
        line-height: 30px;
      }
    }
  }

  .btn-content {
    display: flex;
    justify-content: space-around;
    margin: 20px 0;
    width: 90%;
  }
}
</style>
